{% extends "admin/base.html" %}

{% block content %}
<div class="content-header">
    <h1>模型对话</h1>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">模型对话测试</h5>
    </div>
    <div class="card-body">
        <form id="chatForm">
            <div class="mb-3 row">
                <div class="col-md-4 mb-2">
                    <label for="chatRequestUrl" class="form-label">请求地址</label>
                    <input type="text" class="form-control" id="chatRequestUrl" value="http://localhost:8080/v1/chat/completions">
                </div>
                <div class="col-md-4 mb-2">
                    <label for="chatModelName" class="form-label">模型名称</label>
                    <input type="text" class="form-control" id="chatModelName" value="Deepseek-671B_Pro">
                </div>
                <div class="col-md-4 mb-2">
                    <label for="chatApiKey" class="form-label">API Key</label>
                    <input type="text" class="form-control" id="chatApiKey" value="">
                </div>
            </div>
            <div class="mb-3">
                <label for="chatInput" class="form-label">输入对话内容</label>
                <textarea class="form-control" id="chatInput" rows="3" placeholder="请输入对话内容"></textarea>
            </div>
            <button type="button" class="btn btn-primary" onclick="sendChat()" id="chatSendBtn">发送</button>
            <span id="chatLoading" style="display:none;vertical-align:middle;">
                <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
                <span class="ms-1">等待响应...</span>
            </span>
        </form>
        <div id="chatResponse" class="mt-3 p-3 bg-light border rounded" style="display: none;">
            <strong>模型回复:</strong>
            <p id="chatOutput" class="mb-0"></p>
        </div>
    </div>
</div>

<script>
    function sendChat() {
        const input = document.getElementById('chatInput').value.trim();
        const requestUrl = document.getElementById('chatRequestUrl').value.trim() || 'http://localhost:8080/v1/chat/completions';
        const modelName = document.getElementById('chatModelName').value.trim() || 'Deepseek-671B_Pro';
        const apiKey = document.getElementById('chatApiKey').value.trim();

        if (!input) {
            alert('请输入对话内容');
            return;
        }

        // 显示加载动画，禁用发送按钮
        document.getElementById('chatLoading').style.display = 'inline-block';
        document.getElementById('chatSendBtn').disabled = true;

        // 构造请求体
        const body = {
            model: modelName,
            messages: [
                { role: 'user', content: input }
            ]
        };

        // 构造请求头
        const headers = { 'Content-Type': 'application/json' };
        if (apiKey) {
            headers['Authorization'] = `Bearer ${apiKey}`;
        }

        fetch(requestUrl, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(body)
        })
        .then(response => response.json())
        .then(data => {
            // 支持 OpenAI 格式和自定义格式
            let reply = '';
            if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {
                reply = data.choices[0].message.content;
            } else if (data.reply) {
                reply = data.reply;
            } else if (data.content) {
                reply = data.content;
            } else {
                reply = '模型未返回任何内容';
            }
            document.getElementById('chatResponse').style.display = 'block';
            document.getElementById('chatOutput').textContent = reply;
        })
        .catch(error => {
            console.error('对话请求失败:', error);
            alert('对话请求失败，请检查服务状态');
        })
        .finally(() => {
            // 隐藏加载动画，恢复发送按钮
            document.getElementById('chatLoading').style.display = 'none';
            document.getElementById('chatSendBtn').disabled = false;
        });
    }
</script>
{% endblock %}
